import React, { PureComponent } from 'react';
import { connect } from 'dva';
import {Icon, Modal, Tabs, Radio, Pagination, Button, Spin } from 'antd';
import styles from '../index.less';

import AlbumModal from '../../../AlbumModal'
import {ImgVideo, EmptyVideo} from '../common'

const TabPane = Tabs.TabPane;
const RadioGroup = Radio.Group;

@connect(state => ({
}))


export default class ModalCover extends PureComponent {
  constructor(props) {
    super(props);
    this.nicaiCrx = document.getElementById('nicaiCrx');
    this.state = {
    }
  }

  componentDidMount() {
  }
  componentWillReceiveProps(nextProps) {
    if(!this.props.visible && nextProps.visible) {

    } else if (this.props.visible && !nextProps.visible) {

    }
  }
  showAlbumModal = () => {
    this.props.dispatch({
      type: 'album/show',
      payload: { currentKey: `SetVideoCoverModal${this.props.addImageProps.pixFilter}` },
    });
  }
  handleAddCoverImg = (imgs) => {
    let url = imgs[0].url
    this.props.changeVideoCoverUrl(url)
  }
  replaceImg = (e) => {
    this.showAlbumModal()
  }

  deleteImg = (e) => {
    this.props.changeVideoCoverUrl('')
  }

  render() {
    let {visible, handleOk, handleCancel, video, addImageProps} = this.props
    let minSize = addImageProps.pixFilter.split('x')
    let width = Number(minSize[0])
    let height = Number(minSize[1])
    return (
      <div>
        <Modal
          title="添加视频"
          width="650px"
          visible={visible}
          onOk={handleOk}
          onCancel={handleCancel}
          bodyStyle={{ padding: '5px 20px' }}
          footer={[
            <Button key="submit" disabled={this.props.videoCoverUrl === ''} type="primary" onClick={() => handleOk(this.state.selectVideo)}>
              确认
            </Button>,
            <Button key="back" onClick={handleCancel}>取消</Button>,
          ]}
        >
          <div className={styles['cover-video-body']} >
            {!this.props.videoCoverUrl
              ? <EmptyVideo
                  handleClick={this.showAlbumModal}
                  label="添加上传图片" height= {155}width= {248}
                />
              : <ImgVideo url={this.props.videoCoverUrl} replace={this.replaceImg} delete={this.deleteImg} />
            }
            <div className={styles['video-info']}>
              <div className={styles['upload-tip']}>
                请上传{addImageProps.pixFilter}的图片，支持图片格式：png、jpg、jpeg，不超过 3MB
              </div>
              <div className={styles['video']}>
                <div className={styles['ice-img']}>
                  <img src={video.coverUrl} />
                </div>

                <div className={styles['title']}>{video.title}</div>
              </div>
            </div>
          </div>
        </Modal>

        <AlbumModal mode="single"
          minSize={{width,height}}
          k={`SetVideoCoverModal${addImageProps.pixFilter}`} onOk={this.handleAddCoverImg}/>
      </div>
    )
  }
}
